/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
  <view class="page">
    <view class="tab">
      <view
        class="tabItem"
        v-for="(item, index) in tab"
        :key="index"
        :class="{ active: active == index }"
        @click="changeTab(index)"
      >
        <view class="title">{{ item }}</view>
        <view class="underLine" :class="{ active: active == index }"></view>
      </view>
    </view>
    <view class="content">
      <!-- 未使用 -->
      <view v-for="(itemsData, i) in list">
        <view class="list" v-if="active == 0">
          <view
            class="listItem"
            v-for="(item, index) in itemsData"
            :key="index"
          >
            <image
              :src="imgStaticUrl + '/images/coupon1.png'"
              class="coupon"
            ></image>
            <view class="box">
              <view class="price">
                <view class="icon">{{ $t("¥") }}</view>
                <view class="volum">{{ item.dec_price }}</view>
              </view>
              <view class="descripe">
                <view class="shop-name">{{ item.shop_name }}</view>
                <view class="text"
                  >{{ $t("满") }}{{ $t("¥") }}{{ item.man_price }}{{ $t("减")
                  }}{{ item.dec_price }}</view
                >
                <view class="expire"
                  >{{ item.start_time }}-{{ item.end_time }}</view
                >
              </view>
              <view
                class="state"
                @click="
                  $u.route('/pagesC/shop/storeDetails', {
                    shop_id: item.shop_id,
                  })
                "
              >
                {{ $t("立即使用") }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 已使用 -->
      <view v-for="(itemsData, i) in list">
        <view class="list expired" v-if="active == 1">
          <view
            class="listItem"
            v-for="(item, index) in itemsData"
            :key="index"
          >
            <image
              :src="imgStaticUrl + '/images/coupon2.png'"
              class="coupon"
            ></image>
            <view class="box">
              <view class="price">
                <view class="icon">{{ $t("¥") }}</view>
                <view class="volum">{{ item.dec_price }}</view>
              </view>
              <view class="descripe">
                <view class="shop-name">{{ item.shop_name }}</view>
                <view class="text"
                  >{{ $t("满") }}{{ $t("¥") }}{{ item.man_price }}{{ $t("减")
                  }}{{ item.dec_price }}</view
                >
                <view class="expire"
                  >{{ item.start_time }}-{{ item.end_time }}</view
                >
              </view>
              <view class="state">
                <image
                  :src="imgStaticUrl + 'images/coupon_status1.png'"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 已过期 -->
      <view class="list expired" v-if="active == 2">
        <view v-for="(itemsData, i) in list">
          <view
            class="listItem"
            v-for="(item, index) in itemsData"
            :key="index"
          >
            <image
              :src="imgStaticUrl + '/images/coupon2.png'"
              class="coupon"
            ></image>
            <view class="box">
              <view class="price">
                <view class="icon">{{ $t("¥") }}</view>
                <view class="volum">{{ item.dec_price }}</view>
              </view>
              <view class="descripe">
                <view class="shop-name">{{ item.shop_name }}</view>
                <view class="text"
                  >{{ $t("满") }}{{ $t("¥") }}{{ item.man_price }}{{ $t("减")
                  }}{{ item.dec_price }}</view
                >
                <view class="expire"
                  >{{ item.start_time }}-{{ item.end_time }}</view
                >
              </view>
              <view class="state">
                <image
                  :src="imgStaticUrl + 'images/counon_status2.png'"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <div class="no-more" v-if="!isHas">{{ $t("没有更多了") }}</div>
      <view class="button" @click="$u.route('/pagesB/coupon/getCoupon')">{{
        $t("领券中心")
      }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStaticUrl: this.STATICURL,
      tab: [this.$t("未使用"), this.$t("已使用"), this.$t("已过期")],
      active: 0, //当前选中项
      list: [],
      isHas: true,
      pageShow: false,
    };
  },

  onLoad() {
    this.getcouponlstshop();
  },

  // 切换
  methods: {
    changeTab(index) {
      this.list = [];
      this.active = index;
      this.isHas = false;
      this.$nextTick(() => {
        this.getcouponlstshop();
      });
    },

    getcouponlstshop() {
      if (this.isMore) return;

      this.$loading();

      this.$http
        .getcouponlstshop({
          filter: this.active + 1,
        })
        .then((res) => {
          if (res.status === 200) {
            if (res.data.length) {
              this.list = res.data;
              this.isHas = res.data.length;
            } else {
              this.isHas = false;
            }
          } else {
            this.$toast(res.mess);
          }
        });
    },
  },

  onReachBottom() {
    this.getStockDetailList();
  },
};
</script>

<style lang="less" scoped>
.page {
  padding-bottom: 140px;
  .button {
    position: fixed;
    bottom: 80rpx;
    width: 500rpx;
    height: 44px;
    left: 125rpx;
    font-size: 16px;
    background-image: -webkit-linear-gradient(left, #8bbefd, #e0e0e0);
    background-image: linear-gradient(to right, #8bbefd, #e0e0e0);
    box-shadow: 4rpx 4rpx 4rpx #ccc;
    border-radius: 50rpx;
  }

  .tab {
    top: 0;
    position: fixed;
    /* #ifdef H5 */
    top: 88rpx;
    /* #endif */
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 88rpx;
    background: #fff;
    z-index: 2;
    border-bottom: 1rpx solid #fbfbfb;

    .tabItem {
      font-size: 28rpx;
      line-height: 48rpx;
      color: #999;
      font-weight: 400;

      &.active {
        color: #fa3e3f;
        font-weight: 600;
      }
    }
  }

  .content {
    padding-top: 88rpx;

    .list {
      .listItem {
        padding: 11rpx 22rpx;
        background: #fff;
        position: relative;
        border-bottom: 1rpx solid #fbfbfb;

        &:last-child {
          border-bottom: none;
        }

        .coupon {
          width: 100%;
          height: 188rpx;
        }

        .box {
          color: #fff;
          position: absolute;
          left: 32rpx;
          top: 32rpx;
          right: 32rpx;
          bottom: 32rpx;
          padding: 42rpx 23rpx 42rpx 31rpx;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .price {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120rpx;

            .icon {
              font-size: 36rpx;
            }

            .volum {
              font-size: 60rpx;
            }
          }

          .descripe {
            margin-left: 22rpx;
            flex: 1;

            .shop-name {
              background-color: #fff;
              color: #79b2fb;
              border-radius: 50rpx;
              padding: 2rpx 10rpx;
              width: fit-content;
              font-size: 24rpx;
            }

            .text {
              font-size: 24rpx;
              line-height: 33rpx;
              margin-top: 15rpx;
            }

            .expire {
              font-size: 18rpx;
              line-height: 25rpx;
              margin-top: 15rpx;
            }
          }

          .state {
            font-size: 24rpx;
            height: 120rpx;
            line-height: 120rpx;
            width: 120rpx;
            text-align: center;

            image {
              width: 121rpx;
              height: 121rpx;
            }
          }
        }
      }
    }

    .expired {
      .shop-name {
        color: #adacac !important;
      }
    }
  }
}
</style>
